<template>
    <div>
      <a-collapse default-active-key="1" :bordered="false">
        <template #expandIcon="props">
          <a-icon type="caret-right" :rotate="props.isActive ? 90 : 0" />
        </template>
        <a-collapse-panel key="1" header="折叠面板1" :style="customStyle">
          <p>{{ text }}</p>
        </a-collapse-panel>
        <a-collapse-panel key="2" header="折叠面板2" :style="customStyle">
          <p>{{ text }}</p>
        </a-collapse-panel>
        <a-collapse-panel key="3" header="折叠面板3" :style="customStyle">
          <p>{{ text }}</p>
        </a-collapse-panel>
      </a-collapse>
    </div>
  </template>
  <script>
  export default {
    data() {
      return {
        text: `内容。。。`,
        customStyle:
          'background: #f7f7f7;border-radius: 4px;margin-bottom: 24px;border: 0;overflow: hidden',
      };
    },
  };
  </script>
  